﻿@page "/datagrid/grouping"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_inventordata
@inherits SampleBaseComponent;

<SampleDescription>
  <p>This sample demonstrates grouping feature of the DataGrid component. In this sample, the DataGrid data is grouped against Customer Name column. To group any other column simply drag the column header and drop on the group drop area.</p>  
</SampleDescription>
<ActionDescription>
   <p>The DataGrid control has options to group the records based on the required column. When grouping is applied, grouped records are organized into a hierarchical structure to facilitate easier expansion and collapsing of the records. To enable grouping, set the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping'>AllowGrouping</a></code> property as true.</p>
   <p>Columns can be grouped by simply dragging the column header and dropping it on the group drop area.</p>
   <p>In this demo, DataGrid is rendered with grouping enabled and initial grouped by <b>CustomerName</b> column.</p>
    <p>More information on the group data binding can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/grouping/'>documentation section</a>.</p>
</ActionDescription>

    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="row">

                <SfGrid DataSource="@Orders" AllowGrouping="true" AllowSorting="true" AllowPaging="true">
                    <GridGroupSettings Columns="@GroupedColumns"></GridGroupSettings>
                    <GridColumns>
                        <GridColumn Field=@nameof(Order.OrderID) IsPrimaryKey="true" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    </GridColumns>
                </SfGrid>

            </div>
        </div>
    </div>

@code{
    public string[] GroupedColumns = new string[] { "CustomerID" };

    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}
